<template>
  <el-dialog
    top="0"
    lock-scroll
    :title="!this.dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="新闻分类" prop="cateId">
        <el-select style="width:100%" v-model="dataForm.cateId" filterable placeholder="选择上级分类">
          <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="请输入3-100个字符"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="brief" v-show="dataForm.contentType === 1">
        <el-input type="textarea" v-model="dataForm.brief" placeholder="请输入3-100个字符"></el-input>
      </el-form-item>
      <el-form-item label="封面图" prop="coverUrl">
        <uploader type="image" @uploaded="imageUploaded" :fileList="coverUrlList"></uploader>
        <span>小提示：建议上传大小为250*180(px)像素图</span>
        <el-input style="display:none;" v-model="dataForm.coverUrl" />
      </el-form-item>
      <el-form-item label="内容类型" prop="contentType">
        <el-radio-group v-model="dataForm.contentType">
          <el-radio :label="0">图文内容</el-radio>
          <el-radio :label="1">视频内容</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="内容"
        v-show="dataForm.contentType === contentType.imageText"
        prop="content"
      >
        <ck-editor ref="ckEditor" :change="contentChanged" />
      </el-form-item>
      <el-form-item label="视频" v-show="dataForm.contentType === contentType.video" prop="videoUrl">
        <uploader type="video" @uploaded="videoUploaded" :fileList="videoUrlList"></uploader>
      </el-form-item>
      <!-- <el-form-item label="排序" prop="sort">
                <el-input-number v-model="dataForm.sort" :min="0" :max="2147483647"></el-input-number>
                <br/>
                <span>数值越大越靠前</span>
      </el-form-item>-->
      <el-form-item label="是否推荐" prop="isRecommend">
        <el-switch v-model="dataForm.isRecommend" active-color="#13ce66" inactive-color="#999"></el-switch>
      </el-form-item>
      <el-form-item label="是否显示" prop="isDisplay">
        <el-switch v-model="dataForm.isDisplay" active-color="#13ce66" inactive-color="#999"></el-switch>
      </el-form-item>
      <el-form-item label="是否置頂" prop="isDisplay">
        <el-switch v-model="dataForm.isTop" active-color="#13ce66" inactive-color="#999"></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitForm()" :loading="loading">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Uploader from '@/components/uploader'
import CkEditor from '../../../components/ckEditor/ckEditor'

export default {
  components: { CkEditor, Uploader },
  data() {
    return {
      visible: false,
      contentType: {
        imageText: 0,
        video: 1
      },
      newsId: '',
      dataForm: {
        id: 0,
        cateId: '',
        categoryName: '',
        title: '',
        brief: '',
        coverUrl: '',
        videoUrl: '',
        contentType: 0,
        content: '',
        sort: 0,
        isRecommend: false,
        isDisplay: true,
        isTop: false
      },
      videoUrlList: [],
      coverUrlList: [],
      loading: false,
      cateList: [],
      dataRule: {
        cateId: [{ required: true, message: '分类不能为空' }],
        title: [
          { required: true, message: '新闻标题不能为空' },
          { min: 3, max: 100, message: '请输入 3 到 100 个字符' }
        ],
        brief: [
          { required: true, message: '新闻简介不能为空' },
          { min: 3, max: 100, message: '请输入 3 到 100 个字符' }
        ],
        coverUrl: [{ required: true, message: '请上传封面图' }]
      }
    }
  },
  methods: {
    contentChanged(content) {
      this.dataForm.content = content
    },
    async submitForm() {
      let valid = await this.$refs['dataForm'].validate()
      if (!valid) return

      this.loading = true
      let res = await this.$http.post(
        `/news-admin/news/${!this.dataForm.id ? 'save' : 'update'}`,
        this.buildRequest()
      )
      if (res && res.code === 200) {
        this.visible = false
        this.$refs.ckEditor && this.$refs.ckEditor.setData('')
        this.$notify.success({ title: '成功', message: '保存新闻成功' })
        this.$emit('refreshDataList')
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
      this.loading = false
    },
    async initEditor(newsId) {
      this.dataForm.id = newsId
      this.visible = true
      await this.loadCategory()
      this.$nextTick(async () => {
        this.$refs['dataForm'].resetFields()
        // 编辑状态下初始化Form
        if (newsId) {
          let res = await this.$http.post(`/news-admin/news/info/${newsId}`)
          this.buildDataForm(res.data)
          this.$refs.ckEditor &&
          this.$refs.ckEditor.setData(res.data.content)
        } else {
          this.$refs.ckEditor && this.$refs.ckEditor.setData('')
        }
      })
    },
    async loadCategory() {
      let res = await this.$http.post('/news-admin/category/select')
      this.cateList = res.data
    },
    // 上传主图
    imageUploaded(file) {
      this.dataForm.coverUrl = file.url
    },
    videoUploaded(file) {
      this.dataForm.videoUrl = file.url
    },
    buildRequest() {
      return {
        id: this.dataForm.id || undefined,
        cateId: this.dataForm.cateId || undefined,
        title: this.dataForm.title,
        brief: this.dataForm.brief,
        type: 1,
        contentType: this.dataForm.contentType,
        content: this.dataForm.content,
        sort: this.dataForm.sort,
        coverUrl: this.dataForm.coverUrl,
        videoUrl: this.dataForm.videoUrl,
        isRecommend: this.dataForm.isRecommend ? 1 : 0,
        isDisplay: this.dataForm.isDisplay ? 1 : 0,
        isTop: this.dataForm.isTop ? 1 : 0
      }
    },
    buildDataForm(news) {
      this.dataForm.id = news.id
      this.dataForm.cateId = news.cateId
      this.dataForm.categoryName = news.categoryName
      this.dataForm.title = news.title
      this.dataForm.sort = news.sort
      this.dataForm.brief = news.brief
      this.dataForm.coverUrl = news.coverUrl
      this.dataForm.videoUrl = news.videoUrl
      this.dataForm.contentType = news.contentType
      this.dataForm.content = news.content
      this.dataForm.isTop = !!news.isTop
      this.dataForm.isDisplay = !!news.isDisplay
      this.dataForm.isRecommend = !!news.isRecommend
    }
  },
  watch: {
    'dataForm.coverUrl'(val) {
      if (val) {
        this.coverUrlList = [val]
      } else {
        this.coverUrlList = []
      }
    },
    'dataForm.videoUrl'(val) {
      if (val) {
        this.videoUrlList = [val]
      } else {
        this.videoUrlList = []
      }
    },
    'dataForm.title'(val) {
      if (this.dataForm.contentType === 0) {
        this.dataForm.brief = val
      }
    }
  }
}
</script>

<style scoped>
</style>
